<template>
    <view class="savepadding">
        <u-subsection :list="list"
                      :current="current"
                      activeColor="#12B9A3"
                      @change="sectionChange"></u-subsection>
        <template v-if="current==0">
            <view class="card wrap">
                <view class="header">
                    <view class="title">签约客户信息</view>
                </view>
                <view class="list">
                    <view class="label">客户类型</view>
                    <view class="value">{{detail.customerTypeStr|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">客户姓名</view>
                    <view class="value">{{detail.customerName|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">身份证号码</view>
                    <view class="value">{{detail.idCardNo|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">联系电话</view>
                    <view class="value">{{detail.contactMobile|filterNull}}</view>
                </view>
            </view>
            <view class="card wrap">
                <view class="header">
                    <view class="title">签约订单信息</view>
                    <view class="title">{{detail.orderStatusStr|orderStatus}}</view>
                </view>
                <view class="list">
                    <view class="label">所属业务员</view>
                    <view class="value">{{detail.createBy|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">签约号</view>
                    <view class="value">{{detail.orderNo|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">签约业务类型</view>
                    <view class="value">{{detail.businessTypeStr|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">申请签约时间</view>
                    <view class="value">{{detail.createTime|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">签约完成时间</view>
                    <view class="value">{{detail.createTime|filterNull}}</view>
                </view>
                <view class="list">
                    <view class="label">签约扣款金额/元</view>
                    <view class="value">¥{{detail.totalFee|filterNull}}/元</view>
                </view>
                <view class="list">
                    <view class="label">签约状态</view>
                    <view class="value">{{detail.orderStatusStr|orderStatus}}</view>
                </view>
                <view class="list">
                    <view class="label">分期类型</view>
                    <view class="value">{{detail.decutionTypeStr}}</view>
                </view>
                <template v-if="detail.decutionTypeStr!=='不分期'">
                    <view class="list">
                        <view class="label">扣款期数</view>
                        <view class="value">{{detail.decutionNum|filterNull}}/期</view>
                    </view>
                    <view class="list">
                        <view class="label">扣款模式</view>
                        <view class="value">{{detail.decutionPatternStr|filterNull}}</view>
                    </view>
                    <view class="list">
                        <view class="label">扣款间隔</view>
                        <view class="value">{{detail.decutionIntervalStr|filterNull}}</view>
                    </view>
                    <view class="list">
                        <view class="label">首期扣款日期</view>
                        <view class="value">{{detail.firstDecutionTime|filterNull}}</view>
                    </view>
                </template>
            </view>
            <view class="card wrap">
                <view class="header">
                    <view class="title">分期明细*</view>
                </view>
                <view class="table">
                    <view class="table-h">
                        <view>分期数</view>
                        <view>扣款日期</view>
                        <view>扣款金额</view>
                    </view>
                    <template v-for="item in detail.signOrderBillVoList">
                        <view class="table-b"
                              :key="item.stage">
                            <view>第{{item.stage}}期</view>
                            <view>{{item.expectDecutionTime}}</view>
                            <view>¥{{item.expectDecutionFee}}</view>
                        </view>
                    </template>
                </view>
            </view>
            <view class="button-b"
                  @click="onclickjieyue"
                  v-if="detail.orderStatusStr=='签约成功'">订单解约</view>
        </template>
        <template v-if="current==1">
            <!-- 扣款记录列表 -->
            <template v-for="item in detail.signOrderBillRecordList">
                <view class="card wrap"
                      :key="item.id">
                    <view class="list">
                        <view class="label">签约号</view>
                        <view class="value">{{item.orderNo|filterNull}}</view>
                    </view>
                    <view class="list">
                        <view class="label">扣款单号</view>
                        <view class="value">{{item.recordNo|filterNull}}</view>
                    </view>
                    <view class="list">
                        <view class="label">扣款期数</view>
                        <view class="value">
                            {{item.stage|filterNull}}/{{detail.decutionNum|filterNull}}期</view>
                    </view>
                    <view class="list">
                        <view class="label">预计扣款时间</view>
                        <view class="value">{{item.applyDecutionTime|filterNull}}</view>
                    </view>
                    <view class="list">
                        <view class="label">申请扣款金额/元</view>
                        <view class="value">¥{{item.applyDecutionFee|filterNull}}/元</view>
                    </view>
                    <view class="list"
                          v-if="!$u.test.isEmpty(item.actualDecutionTime)">
                        <view class="label">实际扣款时间</view>
                        <view class="value">{{item.actualDecutionTime|filterNull}}</view>
                    </view>
                    <view class="list"
                          v-if="!$u.test.isEmpty(item.actualDecutionFee)">
                        <view class="label">实际扣款金额/元</view>
                        <view class="value">¥{{item.actualDecutionFee|filterNull}}/元</view>
                    </view>
                    <view class="list"
                          v-if="!$u.test.isEmpty(item.remainFee)">
                        <view class="label">剩余扣款金额/元</view>
                        <view class="value">¥{{item.remainFee|filterNull}}/元</view>
                    </view>
                    <view class="list">
                        <view class="label">扣款方式</view>
                        <view class="value">{{item.decutionType|billDecutionType}}</view>
                    </view>
                    <view class="list tip">
                        <view class="label">扣款状态</view>
                        <view class="value">{{item.decutionStatus|decutionStatus}}</view>
                    </view>
                    <!-- <view class="footer">
                        <view>
                            <view class="detail"
                                  v-if="item.actualDecutionFee < item.applyDecutionFee&&detail.orderStatusStr=='签约成功'"
                                  @click="onclickoukuan(item.signOrderBillId),mmvNum=((item.applyDecutionFee*100) - (item.actualDecutionFee*100))/100">扣款</view>
                            <view class="tip"
                                  v-if="item.failReason">{{item.failReason}}</view>
                        </view>
                    </view> -->
                </view>
            </template>
            <u-empty mode="list"
                     marginTop="200"
                     v-if="!detail.signOrderBillRecordList.length"></u-empty>
        </template>
        <u-modal :show="showjieyue"
                 title="此操作将解除签约订单的扣款，是否继续"
                 showCancelButton
                 @cancel="oncanceljieyue"
                 @confirm="onconfirmjieyue">
            <view>
                <view class="list">解约原因*：
                    <view>
                        <u--input class="input"
                                  type="number"
                                  border="none"
                                  fontSize="24upx"
                                  placeholder="请输入"
                                  v-model="unsignReason"></u--input>
                    </view>
                </view>
            </view>
        </u-modal>
        <u-modal :show="showkoukuan"
                 title="手动发起扣款"
                 showCancelButton
                 @cancel="oncancelkoukuan"
                 @confirm="onconfirmkoukuan">
            <view>
                <view class="list">剩余扣款金额：¥{{mmvNum}}/元</view>
                <view class="list">申请扣款金额：
                    <view style="width:100upx">
                        <u--input class="input"
                                  type="number"
                                  border="none"
                                  fontSize="24upx"
                                  placeholder="请输入"
                                  v-model="amount"></u--input>
                    </view>
                    /元
                </view>
                <view class="tip">最低输入扣款金额0元</view>
            </view>
        </u-modal>
    </view>
</template>

<script>
import * as orderApi from '@/api/order-api'
import shoudongkoukuan from '@/pagesA/mixins/shoudongkoukuan'

export default {
    mixins: [shoudongkoukuan],
    data() {
        return {
            list: ['订单信息', '扣款信息'],
            // 或者如下，也可以配置keyName参数修改对象键名
            // list: [{name: '未付款'}, {name: '待评价'}, {name: '已付款'}],
            mmvNum: 0,
            current: 0,
            showjieyue: false,
            showkoukuan: false,
            unsignReason: '', // 解约原因
            signOrderBillId: 0, // 扣款订单id
            amount: '', // amount
            detail: {
                "id": '', // 1, //（签约订单id）
                "businessTypeStr": '', // null, //（业务类型）,
                "customerTypeStr": '', // null, //（客户类型）,
                "orderNo": '', // "PD00001", //（签约订单编号）,
                "orderStatusStr": '', // "签约成功", //（签约订单状态）,
                "customerName": '', // null, //（客户名称）,
                "customerId": '', // null, //（客户id）,
                "contactPerson": '', // null, //（联系人）,
                "contactMobile": '', // null, //（联系电话）,
                "totalFee": '', // 98888.00, //（签约金额）,
                "createTime": '', // "2022-02-21 15:36:56", //（创建时间）,
                "unsignTime": '', // null, //（解约时间）,
                "unsignReason": '', // "", //（解约原因）,
                "decutionNum": '', // "12", //（扣款期数）,
                "idCardNo": '', // null, //（身份证号码）,
                "createBy": '', // "zhaoyou", //（业务员）,
                "decutionTypeStr": '', // "分期", //（是否分期）,
                "decutionPatternStr": '', // "按分期数平均", //（扣款模式）,
                "decutionIntervalStr": '', // "自然月", //（扣款间隔）,
                "firstDecutionTime": '', // "2022-02-21 15:36:16", //（第一次扣款日期）,
                "signOrderBillVoList": [ //（账单列表）
                    {
                        "stage": '', // "1", //（期数）
                        "expectDecutionTime": '', // "2022-02-21", //（预计扣款时间）,
                        "expectDecutionFee": '', // 10000.00, //（预计扣款金额）
                    },
                    {
                        "stage": '', // "2",
                        "expectDecutionTime": '', // "2022-02-21",
                        "expectDecutionFee": '', // 10000.00,
                    },
                    {
                        "stage": '', // "3",
                        "expectDecutionTime": '', // "2022-02-21",
                        "expectDecutionFee": '', // 10000.00,
                    },
                    {
                        "stage": '', // "4",
                        "expectDecutionTime": '', // "2022-02-21",
                        "expectDecutionFee": '', // 10000.00,
                    }
                ],
                "bankCardSignList": [ // null, //（签约银行卡列表）

                ],
                "signOrderBillRecordList": [ // null, //（扣款记录列表）
                    {
                        "searchValue": '', // null,
                        "createBy": '', // "admin",
                        "createTime": '', // "2022-03-01 16:44:16",
                        "updateBy": '', // null,
                        "updateTime": '', // "2022-03-01 16:44:16",
                        "remark": '', // null,
                        "params": '', // {},
                        "id": '', // 43,
                        "signOrderBillId": '', // 110,
                        "signOrderId": '', // 38,
                        "orderNo": '', // "MCH2022022310435662793528945275475",  // （订单编号）
                        "recordNo": '', // "84875533-bc71-4bbb-b23b-5bb807efcf0b", // （扣款编号）
                        "stage": '', // "1", // （期数）
                        "applyDecutionFee": '', // 100.00,  // （申请扣款金额）
                        "applyDecutionTime": '', // "2022-03-01",  // （申请扣款时间）
                        "decutionType": '', // 1,  // （分期类型）
                        "decutionStatus": '', // 4,  // （扣款状态 1扣款成功 2扣款失败 3部分成功 4扣款中）
                        "bankCardId": '', // null,
                        "bankCardNo": '', // null, // （扣款银行卡）
                        "actualDecutionTime": '', // null, // （实际扣款时间）
                        "actualDecutionFee": '', // null, // （实际扣款金额）
                        "remainFee": '', // null, // （剩余金额）
                        "failReason": '', // null,  // （失败原因）
                        "createUserId": '', // 1,
                        "deptId": '', // 103,
                        "tenantId": '', // 1,
                        "delFlag": '', // "0"
                    },
                ],
            },
        }
    },
    computed: {
        userId() {
            return this.$store.state.user?.userInfo?.userId;
            // return this.detail.customerId;
        },
    },
    onLoad(op) {
        // if (op.data) {
        //     const data = JSON.parse(op.data);
        //     this.detail = Object.assign(this.detail, data);
        // }
        const value = uni.getStorageSync('qianyue-detail');
        if (value) {
            const data = JSON.parse(value);
            this.detail = Object.assign(this.detail, data);
        }
    },
    methods: {
        sectionChange(index) {
            this.current = index;
        },
        onclickjieyue() {
            this.showjieyue = true;
        },
        oncanceljieyue() {
            this.showjieyue = false;
        },
        /**
         * 签约订单解约
         */
        async onconfirmjieyue() {
            if (!this.unsignReason){
                uni.showToast({ title:'请输入原因', icon: 'success' });
                return;
            }
            try {
                const result = await orderApi.orderUnsign({
                    signOrderId: this.detail.id, // 签约订单id
                    unsignReason: this.unsignReason, // 解约原因
                });
                this.showjieyue = false;
                uni.showToast({ title: result.msg, icon: 'success' });
                uni.$emit('shoudongkoukuan');
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        onclickoukuan(signOrderBillId) {
            this.signOrderBillId = signOrderBillId;
            this.showkoukuan = true;
        },
        oncancelkoukuan() {
            this.showkoukuan = false;
        },
        /**
         * 手动发起扣款
         */
        async onconfirmkoukuan() {
            if (!Number(this.amount) || this.amount > this.mmvNum) {
                uni.showToast({
                    title: '扣款金额输入错误！',
                    icon: 'error',
                })
                return;
            }
            await this.shoudongkoukuan({
                customerId: this.detail.customerId, // "客户id",
                signOrderBillId: this.signOrderBillId, // "扣款订单id",
                amount: this.amount, // "扣款金额"
            });
            // try {
            //     const result = await orderApi.deduction({
            //         "customerId": this.detail.customerId, // "客户id",
            //         "signOrderBillId": this.signOrderBillId, // "扣款订单id",
            //         "amount": this.amount, // "扣款金额"
            //     });
            //     if (result.code == 200) {
            //         this.showkoukuan = false;
            //         return;
            //     }
            //     throw new Error(result.msg);
            // } catch (error) {
            //     const title = error?.msg || error?.message || error || '网络错误';
            //     uni.showToast({ title, icon: 'error' });
            // }
        },
    }
}
</script>

<style lang="scss" scoped src="@/styles/mmv.scss"></style>